<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<title>别踩白块儿</title>
	<style>
	*{margin:0;padding:0;list-style-type:none;}
	a,img{border:0;}
	html,body{ width: 100%;height: 100%; }
	body{font:12px/180% Arial, Helvetica, sans-serif, "微软雅黑";}

	.main{position:relative;margin:10px auto;max-width:380px;height:600px;border:1px solid #ccc;overflow:hidden;}
	.ph-main{width: 100%;height: 100%;position: relative;border: none; margin: auto;overflow: hidden;}
	.container{position:absolute;top:-150px;width:100%;height:auto;}
	.row{width:100%;height:150px;}
	.cell{float:left;width:25%;height:100%;background-color: #fff;}
	.block{background:#ccc;cursor:pointer;}
	.mark{ position: absolute; width: 40px; height: 20px; background-color: #e8e8e8;
		border-radius: 50%; top: 10px; left: 50%; margin-left: -20px; text-align: center; line-height: 20px;z-index: 1;}
	.mask , .again-mask{position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0,0,0,.3);text-align: center;z-index: 2;}
	.mask h1 , .again-mask h1{ color: #fff;height: 50px;line-height: 50px;font-family: '微软雅黑';margin-top: 35%; }
	.mask span , .again-mask span{ display: block; width: 100px;height: 50px;font-size: 20px; text-align: center; line-height: 50px;margin: 50px auto; background: #4cd964;color: #fff;border-radius: 6px; cursor: pointer; -webkit-box-shadow: 1px 1px 1px #999;box-shadow: 1px 1px 1px #999;text-shadow: 1px 1px 1px #fff; }
	.again-mask h2{ color: #fff;height: 45px;line-height: 45px;font-family: '微软雅黑';}
	</style>
</head>
<body>
	<div class="main" id="main">
		<div class="container" id="container">
		</div>
		<div class="mask" id="mask">
			<h1>别踩白块儿</h1>
			<span id="start">开始</span>
		</div>
	</div>

	<script src="Block.js"></script>
	<script>
		var oContainer = document.getElementById('container');
		var block = new Block(oContainer);
		block.init();

		var mask = document.getElementById('mask');
		var start = document.getElementById('start');
		start.onclick = function(){
			block.start();
			mask.style.display = 'none';
		}
	</script>
<div style="text-align:center;font-size:72px">
<p><a href="index.html" target="_blank">回到主页</a></p>
</div>
</body>
</html>